<template>
  <div id="navbar" class="navbar navbar-default ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
  
      <div class="navbar-header pull-left">
        <a href="#" class="navbar-brand">
          <small><i class="fa fa-leaf"></i>Ace Admin</small>
        </a>
      </div>
  
      <div class="navbar-buttons navbar-header pull-right" role="navigation">
        <ul class="nav ace-nav">
          <li class="grey dropdown-modal">
            <a data-toggle="dropdown" class="dropdown-toggle" >XXX</a>
          </li>
          <li class="light-blue dropdown-modal">
            <a data-toggle="dropdown"  class="dropdown-toggle">
              <img class="nav-user-photo" src="../../assets/avatars/user.jpg" alt="Jason's Photo" />
              <span class="user-info">
                <small>Welcome,</small> Jason
              </span>
              <i class="ace-icon fa fa-caret-down"></i>
            </a>
  
            <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
              <li>
                <a >
                  <i class="ace-icon fa fa-cog"></i> Settings
                </a>
              </li>
              <li>
                <a href="profile.html">
                  <i class="ace-icon fa fa-user"></i> Profile
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a >
                  <i class="ace-icon fa fa-power-off"></i> Logout
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app-top',
  data () {
    return {
      msg: 'top'
    }
  }
}
</script>
